<section class="ev-md-container-ui text-center">
    <div class="row">
        <div class="ev-md-container ev-card-panel">
            <div class="col s12 m6 offset-m3">
                <!-- <div class=" ev-card-panel ev-z-depth-5"> -->
                <div class="ev-md-container ev-card-body change-password-card">
                    <div class="pass-title">Change Password</div>
                    <form name="profileForm" ng-submit="profile.changePassword(profileForm.$valid)" novalidate>
                        <div class="input-field align-left">
                            <input id="old_password" name="old_password" type="{{canShowOldPassword ? 'text' : 'password'}}" class="text-dark-black dark-autofill w-400" ng-model="profile.user.old_password" ng-minlength="8" required focus-if>
                            <span class="form-icon form-icon-dark" ng-click="profile.toggleOldPasswordVisibility()">
                                <i ng-if="!canShowOldPassword" class="fa fa-eye pointer"></i>
                                <i ng-if="canShowOldPassword" class="fa fa-eye-slash pointer"></i>
                            </span>
                            <label for="old_password">Old Password*</label>
                            <div class="wrn-msg text-highlight" ng-messages="profileForm.old_password.$error" ng-if="profileForm.old_password.$touched || profileForm.$submitted">
                                <p ng-message="minlength">password is less than 8 characters.</p>
                                <p ng-message="required">Old password is required</p>
                            </div>
                        </div>
                        <div class="input-field align-left">
                            <input id="new_password1" name="new_password1" type="{{canShowNewPassword ? 'text' : 'password'}}" class="text-dark-black dark-autofill w-400" ng-model="profile.user.new_password1" ng-minlength="8" required match="profile.user.old_password">
                            <span class="form-icon form-icon-dark" ng-click="profile.toggleNewPasswordVisibility()">
                                <i ng-if="!canShowNewPassword" class="fa fa-eye pointer"></i>
                                <i ng-if="canShowNewPassword" class="fa fa-eye-slash pointer"></i>
                            </span>
                            <label for="new_password1">New Password*</label>
                            <div class="wrn-msg text-highlight" ng-messages="profileForm.new_password1.$error" ng-if="profileForm.new_password1.$touched || profileForm.$submitted">
                                <p ng-message="minlength">password is less than 8 characters.</p>
                                <p ng-message="required">New password is required</p>
                                <p ng-message="match">Old password cannot be same as New Password</p>
                            </div>
                        </div>
                        <div class="input-field align-left">
                            <input id="new_password2" name="new_password2" type="{{canShowNewConfirmPassword ? 'text' : 'password'}}" class="text-dark-black dark-autofill w-400" ng-model="profile.user.new_password2" ng-minlength="8" compare-to="profile.user.new_password1" required>
                            <span class="form-icon form-icon-dark" ng-click="profile.toggleNewConfirmVisibility()">
                                <i ng-if="!canShowNewConfirmPassword" class="fa fa-eye pointer"></i>
                                <i ng-if="canShowNewConfirmPassword" class="fa fa-eye-slash pointer"></i>
                            </span>
                            <label for="new_password2">New Password (Again)*</label>
                            <div class="wrn-msg text-highlight" ng-messages="profileForm.new_password2.$error" ng-if="profileForm.new_password2.$touched || profileForm.$submitted">
                                <p ng-message="compareTo">Password do not match</p>
                                <p ng-message="minlength">password is less than 8 characters.</p>
                                <p ng-message="required">Confirm new password is required</p>
                            </div>
                        </div>
                        <div class="align-left reg-control">
                            <button class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" type="submit" value="Submit">Submit</button>
                        </div>
                        <div ng-if="profile.isFormError" class="wrn-msg text-highlight align-right"> {{profile.FormError}}</div>
                    </form>
                </div>
            </div>
        <!-- </div> -->
        </div>
    </div>
</section>
